<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<title>后台权限管理界面</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	</head>
	<body>
		<div class="backRoleSysModel-con">
			<blockquote class="layui-elem-quote not_border_left">
				<form class="layui-form" action="">	
					<div class="layui-inline">
						<div class="layui-input-inline">
							<select name="backrolemodel" id="backrolemodel" lay-filter="backrolemodel">								
						    </select>
						</div>
						<div class="layui-inline">
							<button id="btnselbackrole" type="button" class="layui-btn layui-bg-blue">查询</button>							
						</div>
					</div>		
				</form>
			</blockquote>
			
			<table class="layui-hide" name="backrolesystemmodel" id="backrolesystemmodel" lay-filter="backrolesystemmodel"></table>
			<script type="text/html" id="selectbar">
				<input type="checkbox" name="{{d.deepth}}" value="{{d.id}}" title="授予权限" lay-filter="lockDemo" {{ d.isedit=="1" ? 'checked' : '' }}>
			</script>
			
			<script type="text/html" id="menuTypebar">
				<span>{{ d.deepth <= "1" ? '展开菜单' : '子菜单' }}</span>
			</script>			

		</div>
		<script src="../layui/layui.js" charset="utf-8"></script>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/loadselect.js" charset="utf-8"></script>
	</body>
	<script>
		layui.use([ 'table', 'form', 'layer', 'laydate', 'laytpl', 'element' ], function() {
		var table = layui.table, form = layui.form, 
			layer = layui.layer, $ = layui.jquery,
			laydate = layui.laydate, laytpl = layui.laytpl,
			element = layui.element;
			
		//调用方法加载select管理员角色
		loadAdminRole("backrolemodel",form); 
		
		/* 点击查询对网站用户进行筛选 */
		$("#btnselbackrole").click(function(){
			var roleid = $("#backrolemodel").val().trim();
			//alert(roleid);
			table.render({
				elem : '#backrolesystemmodel',
				id:'backrolesystemmodelid',
				url : '../getsystemmodelbyrolelist?roleid='+roleid,
				title : '后台用户数据表',
				height: "full-160",
				skin : 'line',
				even : true,
				cols : [ 
				     [ {
					type : 'numbers',
					title: '序号',
					align: 'center',
					field: 'id',
					width: 80
				}, 
				{
					field: 'rolename',
					align: 'center',
					title: '角色名',							
				}, 
				{
					field: 'chinesename',
					align: 'center',
					title: '菜单名称'
				}, {
					field: 'deepth',
					align: 'center',
					templet: '#menuTypebar',
					title: '菜单层次'					
				}, 
				{
					field: 'parentName',
					align: 'center',
					title: '父菜单名称'
				},{
					title : '操作',
					toolbar : '#selectbar',
					align : 'center'
				} ] 
				 ],
				 page: {
						layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
						groups: 5,
						limit: 10,
						limits: [10, 20, 30, 40, 50],
						theme: '#1E9FFF',						
				 },
			});
		});
		
	//对权限授权或取消授权
	form.on('checkbox(lockDemo)', function(obj) {
		//obj代表当前checkbox所在行的数据对象
		if(obj.elem.checked){ //但obj.elem.checked==true
			//还要再获取当前行的值
			//alert("check=" +obj.elem.checked);
			$.ajax({
				type : 'get',
				url : '../passisedit?id=' + this.value,
				datatype : 'json',
				success : function(data) {
					if (data.code == "0") {		
						layer.msg(data.msg, {icon: 1}); 
					} else {
	    	        	layer.msg('授权失败！', {icon: 2});
					}
				},
				error : function() {}
			});
		}
		else{
			$.ajax({
				type : 'get',
				url : '../notpassisedit?id=' + this.value,
				datatype : 'json',
				success : function(data) {
					if (data.code == "0") {		
						layer.msg('取消授权成功！', {icon: 1}); 
					} else {
	    	        	layer.msg('取消授权失败！', {icon: 2});
					}
				},
				error : function() {}
			});
		}				
	}); 
	});
	</script> 
</html>